<template>
  <div class="sideMenu_bor" v-if="menu && menu.length != 0">
    <div class="icon">
      <i class="iconfont icon-menu" @click="closeSideMenu()"></i>
    </div>
    <ul class="sideMenu">
      <li v-for="(item, index) in menu" :key="index" :class="[active == index ? 'active' : '']"
        @click="topath(item, index)">
        <div class="menu_icon" :style="{ background: back[index] }">
          <!-- <i class="iconfont" :class="item.icon"></i> -->
          <a-icon :type="item.meta.icon" v-if="item.meta.icon" />
        </div>

        <div class="title" :class="[showMenuText ? 'openMenuText' : '']">
          {{ item.meta.title }}
        </div>
      </li>
    </ul>
  </div>
</template>

<script>
import bus from "@/bus";
import Vue from "vue";
import { mapActions, mapState } from "vuex";
import { Mixin } from "@/mixins/mixin.js";
import { USER_AUTH } from "@/store/mutation-types";
export default {
  mixins: [Mixin],
  data() {
    return {
      showMenuText: false,
      active: 1,
      buttonWidth: 70,
      text: "Are you sure to delete this task?",
      menu: [],

      back: [
        "linear-gradient(to bottom, rgba(1, 209, 180, 1), rgba(0, 194, 167, 1))",
        "linear-gradient(to bottom, rgba(255, 135, 43, 1), rgba(255, 120, 43, 1))",
        "linear-gradient(to bottom, rgba(61, 135, 233, 1), rgba(55, 123, 254, 1))",
        "linear-gradient(to bottom, rgba(112, 224, 52, 1), rgba(78, 187, 30, 1))",
        "linear-gradient(to bottom, rgba(1, 209, 180, 1), rgba(0, 194, 167, 1))",
        "linear-gradient(to bottom, rgba(255, 135, 43, 1), rgba(255, 120, 43, 1))",
        "linear-gradient(to bottom, rgba(61, 135, 233, 1), rgba(55, 123, 254, 1))",
        "linear-gradient(to bottom, rgba(112, 224, 52, 1), rgba(78, 187, 30, 1))",
        "linear-gradient(to bottom, rgba(1, 209, 180, 1), rgba(0, 194, 167, 1))",
        "linear-gradient(to bottom, rgba(255, 135, 43, 1), rgba(255, 120, 43, 1))",
        "linear-gradient(to bottom, rgba(61, 135, 233, 1), rgba(55, 123, 254, 1))",
        "linear-gradient(to bottom, rgba(112, 224, 52, 1), rgba(78, 187, 30, 1))",
        "linear-gradient(to bottom, rgba(1, 209, 180, 1), rgba(0, 194, 167, 1))",
        "linear-gradient(to bottom, rgba(255, 135, 43, 1), rgba(255, 120, 43, 1))",
        "linear-gradient(to bottom, rgba(61, 135, 233, 1), rgba(55, 123, 254, 1))",
        "linear-gradient(to bottom, rgba(112, 224, 52, 1), rgba(78, 187, 30, 1))",
      ],
    };
  },
  mounted() {
    //   console.log(Vue.ls.get(USER_AUTH));
    //   console.log(this.$route.path);

    let menuList = Vue.ls.get(USER_AUTH);
    let index = Vue.ls.get("CURRENT_MENU");
    if (menuList[index.idx].children) {
      for (var i = 0; i < menuList[index.idx].children.length; i++) {
        if (this.$route.path == menuList[index.idx].children[i].path) {
          this.menu = menuList[index.idx].children;
          this.active = i;
        }
      }
    }

    bus.$on("childrenMenu", (menu) => {
      this.menu = menu.children;
      this.active = 0;
      this.$router.push(this.menu[this.active].path);
    });
  },
  methods: {
    closeSideMenu() {
      this.showMenuText = !this.showMenuText;
    },
    confirm() {
      message.info("Clicked on Yes.");
    },
    topath(item, index) {
      this.active = index;
      // this.setLoading(true);

      // this.setLoading(false);
      this.$router.push(item.path);
    },
  },
};
</script>

<style lang="scss" scoped>
.active {
  background: #f0f3ff;

  box-shadow: 0px 2px 6px #ccc;

  &::before {
    content: "";
    right: -5px;
    background: #f0f3ff;
    position: absolute;
    top: 50%;
    margin-top: -5px;
    display: block;
    width: 10px;
    height: 10px;
    z-index: 112;
    border: solid;
    border-color: #f0f3ff;
    border-width: 1px;
    border-right: none;
    border-bottom: none;
    transform: rotate(45deg);
  }

  .title {
    color: #1b96ff !important;
    font-weight: 600;
  }
}

.openMenuText {
  padding-left: 0 !important;
  max-width: 0 !important;
  transition: max-width 0.2s;
}

.sideMenu_bor {
  //   min-width: 80px;
  height: 100%;
  overflow: hidden;
  background: #fff;
  border-radius: 5px;
  position: relative;

  .icon {
    cursor: pointer;
    color: #999999;
    text-align: left;
    margin: 10px 30px;
    border-bottom: 1px solid #f8f8f8;

    &:hover {
      opacity: 0.7;
      color: #1187e6;
      transition: 0.2s;
    }
  }
}

.sideMenu {
  width: 100%;
  padding: 0 16px;
  border-top-right-radius: 5px;
  border-bottom-right-radius: 5px;

  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;

  li {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    border-radius: 5px;
    margin-top: 8px;
    padding: 6px 10px;
    position: relative;

    &:hover {
      background: #f0f3ff;
      cursor: pointer;
    }

    .menu_icon {
      width: 32px;
      height: 32px;
      display: flex;
      align-items: center;
      justify-content: center;

      border-radius: 5px;

      i {
        color: #fff;
        font-size: 20px;
      }
    }

    .title {
      padding-left: 10px;
      max-width: 150px;
      transition: 0.2s;
      overflow: hidden;
      font-size: 14px;
      height: 20px;
      //   font-weight: 600;
      color: #666;
    }
  }
}</style>